<template>
  <div class="details">
    <header>

      <!-- <van-nav-bar @click-left="$router.back()" left-arrow :title="$route.name" /> -->
    </header>
    <!-- ========= 内容 开始 ========= -->
    <div class="photo" >
      <div class="tou">商品详情</div>
      <!-- <img v-if="detail" :src="$pregUrl + detail.img" alt /> -->
      <img  src="https://img10.360buyimg.com/n7/jfs/t1/239413/6/8281/85102/6640fdc2Fdf8bea79/ef5eef83011ffcbd.jpg" alt="">
      <div class="page">8/8</div>
    </div>
    <div class="content">
      <div class="photo-size" >
        <div class="size-top">
          <p>
            ￥<b>￥3000</b>
            <!-- <b>{{detail.price | priceFilter}}</b> -->
            

            <!-- <del>￥{{detail.market_price | priceFilter}}</del> -->
          </p>
          <a href>
            <span class="iconfont icon-shoucang"></span>
            <p>收藏</p>
          </a>
        </div>
        <!-- <h3>{{detail.goodsname}}</h3> -->
        <p>敏感肌可用，控油祛痘、男女可用、泡沫绵密、净透毛孔</p>
        <div class="limit">
          <p>11.11限时299元起</p>
        </div>
        <div class="sale">
          <p>此商品于2020-11-11,00点结束闪购特卖，品牌美妆闪购专场</p>
        </div>
      </div>

      <div class="size-bottom">
        <div class="collect">
          <h5>领券</h5>
          <a href>￥300</a>
          <a href>￥50</a>
          <a href>￥10</a>
        </div>
        <div class="collect">
          <h5>分期</h5>
          <div class="lnstalment">
            <p>可选3/6/12期</p>
            <span class="iconfont icon-xiangyoujiantou"></span>
          </div>
        </div>
        <div class="collect">
          <h5>领券</h5>
          <a href>￥300</a>
          <a href>￥50</a>
          <a href>￥10</a>
        </div>
        <div class="collect">
          <h5>分期</h5>
          <div class="lnstalment">
            <p>可选3/6/12期</p>
            <span class="iconfont icon-xiangyoujiantou"></span>
          </div>
        </div>
        <div class="collect">
          <h5>领券</h5>
          <a href>￥300</a>
          <a href>￥50</a>
          <a href>￥10</a>
        </div>
        <div class="collect">
          <h5>分期</h5>
          <div class="lnstalment">
            <p>可选3/6/12期</p>
            <span class="iconfont icon-xiangyoujiantou"></span>
          </div>
        </div>
      </div>
    </div>

    <!-- ========= 固定定位 ========= -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" dot />
      <van-goods-action-icon
        @click="$router.push('/cart')"
        icon="cart-o"
        text="购物车"
        :badge="num"
      />
      <van-goods-action-icon icon="shop-o" text="店铺" badge="12" />
      <van-goods-action-button type="warning" text="加入购物车" />
      <van-goods-action-button type="danger"  text="立即购买" />
    </van-goods-action>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 定义为空做判断
      detail: null, //img判断条件 detail有值显示，没值不显示
      num: 0
    };
  },
 
  }

</script>

<style scoped>
/* ========= 头部 开始 ========= */


.tou {
  width: 100%;
  background-color: #fb4723;

  height: 46px;
  color: #323233;

  font-size: 24px;

  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}
.van-nav-bar__content {
  height: 60px;
}

/* ========= 内容 开始 ========= */
.photo {
  width: 7.5rem;
  height: 7.5rem;
}
.photo img {
  width: 7.5rem;
  height: 6.5rem;
  position: relative;
}
.photo .page {
  width: 0.8rem;
  height: 0.36rem;
  color: #fff;
  text-align: center;
  line-height: 0.36rem;
  font-size: 0.28rem;
  background-color: #5b5859;
  border-radius: 0.2rem;
  position: absolute;
  right: 0.2rem;
  top: 9.3rem;
}
.content {
  width: 7.5rem;
  height: 8.5rem;
  background-color: #ccc;
}
.photo-size {
  /* width: 7.1rem;
  height: 2.4rem; */
  background-color: #fff;
  padding: 0.2rem;
}
.size-top {
  /* width: 7.1rem;
  height: 0.6rem; */
  display: flex;
  /* flex-direction: row;
  flex-wrap: nowrap; */
  justify-content: space-between;
}
.size-top p {
  height: 0.6rem;
  font-size: 0.3rem;
  color: #ff6040;
}
.size-top b {
  font-size: 0.45rem;
  color: #ff6040;
  font-weight: 500;
}
.size-top del {
  color: #999;
}
.photo-size .size-top a {
  width: 0.6rem;
  height: 0.6rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.photo-size p a span {
  font-size: 0.2rem;
  color: #ff6040;
  margin-top: 0.05rem;
}
.photo-size .size-top a p {
  font-size: 0.2rem;
  color: #ff6040;
  line-height: 0.2rem;
}
.photo-size h3 {
  font-size: 0.3rem;
  color: #333;
  line-height: 0.3rem;
}
.photo-size p {
  font-size: 0.27rem;
  color: #999999;
}
.photo-size .limit {
  width: 1.66rem;
  height: 0.33rem;
  background-color: #ff8066;
  margin-top: 0.3rem;
}
.photo-size .limit p {
  color: white;
  font-size: 0.18rem;
  text-align: center;
  line-height: 0.33rem;
}
.sale {
  width: 7.1rem;
  height: 0.4rem;
  background: #f2f2f2;
  margin-top: 0.2rem;
}
.sale p {
  font-size: 0.18rem;
  line-height: 0.4rem;
}
.size-bottom {
  /* width: 7.1rem;
  height: 4rem; */
  padding: 0.2rem;
  background-color: #fff;
  margin-top: 0.2rem;
  display: flex;
  flex-direction: column;
}
.size-bottom .collect {
  width: 7.1rem;
  height: 0.7rem;
  display: flex;
  align-items: center;
  position: relative;
}
.size-bottom .collect h5 {
  width: 0.65rem;
  font-size: 0.24rem;
  font-weight: 600;
  padding: 0.22rem 0.35rem 0.22rem 0.2rem;
}
.size-bottom .collect a {
  font-size: 0.2rem;
  color: #663014;
  display: block;
  padding: 0.07rem 0.23rem 0.07rem 0.07rem;
  background-color: #ffcc66;
  position: relative;
  margin-right: 0.2rem;
}
.size-bottom .collect a::before {
  content: "";
  width: 0rem;
  height: 0.24rem;
  border: 0.02rem dashed #b27d3d;
  display: block;
  position: absolute;
  right: 0.13rem;
  bottom: 0.07rem;
}
.size-bottom .collect a::after {
  content: "";
  width: 0.1rem;
  height: 0.1rem;
  background-color: white;
  border-radius: 0.5rem;
  display: block;
  position: absolute;
  right: -0.04rem;
  bottom: 0.17rem;
}
.size-bottom .collect::after {
  content: "";
  display: block;
  width: 5.95rem;
  height: 0.02rem;
  background-color: #e6e6e6;
  position: absolute;
  right: 0rem;
  bottom: 0rem;
}
.collect .lnstalment {
  width: 6.42rem;
  height: 0.4rem;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.collect .lnstalment p {
  font-size: 0.23rem;
  line-height: 0.4rem;
  color: #666;
}
.collect .lnstalment span {
  font-size: 0.23rem;
  line-height: 0.4rem;
  color: #666;
}

/* 固定定位 */
.van-goods-action {
  height: 70px;
}
</style>